<template>
  <view>
    <view class="header">
      <view class="bg"></view>
      <Navbar
        title="我的"
        backgroundColor="transparent"
        color="#fff"
        :fixed="false"
      />
      <view class="header__box">
        <view @tap="auth" class="info yd-flex-h-hL-vC">
          <image
            v-if="userInfo.avatar"
            :src="YD_formatUrl(userInfo.avatar)"
            class="info__avatar"
          />
          <image
            v-else
            class="info__avatar"
            src="~@/static/my/defaultAvatar.png"
          />
          <text>{{ userInfo.nickname ? userInfo.nickname : "点击授权" }}</text>
        </view>
        <view v-if="stat.vipCount <= 0" @click="createPackage" class="tools">
          <image class="tools__icon" src="~@/static/my/vip.png" />
          <view style="flex: 1">
            <view class="tools__text">升级成为会员</view>
            <view>无需排队，提前预约，价格优惠</view>
          </view>
          <view class="tools__right">
            <view class="tools__btn">立即开通</view>
          </view>
        </view>
        <view v-else class="stat">
          <view class="stat__item">
            <view class="stat__num">{{ stat.carCount }}</view>
            <view>已绑定车辆</view>
          </view>
          <view class="stat__item">
            <view class="stat__num">{{ stat.vipCount }}</view>
            <view>开通会员车辆</view>
          </view>
          <view class="stat__item">
            <view class="stat__num">{{ stat.parkingCount }}</view>
            <view>总停放次数</view>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="block">
        <view @tap="bindCar" class="block__item">
          <view class="yd-flex-h-hL-vC">
            <image class="item__icon" src="~@/static/my/bind1.png" />
            <text>绑定车辆</text>
          </view>
          <image class="item__arrow" src="~@/static/my/arrow.png" />
        </view>
        <view v-if="stat.carCount > 0" @tap="createPackage" class="block__item">
          <view class="yd-flex-h-hL-vC">
            <image class="item__icon" src="~@/static/my/vipMy.png" />
            <text>会员充值</text>
          </view>
          <image class="item__arrow" src="~@/static/my/arrow.png" />
        </view>
        <view v-if="stat.vipCount > 0" @tap="reservation" class="block__item">
          <view class="yd-flex-h-hL-vC">
            <image class="item__icon" src="~@/static/my/reservation1.png" />
            <text>预约服务</text>
          </view>
          <image class="item__arrow" src="~@/static/my/arrow.png" />
        </view>
        <!-- <view @tap="helpCenter" class="block__item">
          <view class="yd-flex-h-hL-vC">
            <image class="item__icon" src="~@/static/my/help.png" />
            <text>帮助中心</text>
          </view>
          <image class="item__arrow" src="~@/static/my/arrow.png" />
        </view>
        <view @tap="feedback" class="block__item">
          <view class="yd-flex-h-hL-vC">
            <image class="item__icon" src="~@/static/my/feedback.png" />
            <text>问题反馈</text>
          </view>
          <image class="item__arrow" src="~@/static/my/arrow.png" />
        </view> -->
      </view>
      <view class="block">
        <view class="block__item">
          <view class="yd-flex-h-hL-vC">
            <image class="item__icon" src="~@/static/my/follow1.png" />
            <text>用户反馈</text>
          </view>
          <image class="item__arrow" src="~@/static/my/arrow.png" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { fileUploadAPI } from "@/api/file";
import { authAPI } from "@/api/user";
import user from "@/mixins/user.js";
import { YD_formatUrl } from "@/utils/tools.js";
import { getVipStatisticsAPI } from "@/api/vip.js";

export default {
  mixins: [user],
  data() {
    return {
      YD_formatUrl,
      stat: {
        carCount: 0,
        vipCount: 0,
        parkingCount: 0,
      },
    };
  },
  onLoad() {
    this.getVipStatistics();
  },
  onShow() {
    this.getVipStatistics();
  },
  onUnload() {
    uni.$off("auth");
  },
  methods: {
    /** @name 授权 **/
    auth() {
      uni.navigateTo({
        url: "/subpages/my/auth/auth",
        success: () => {
          uni.$once("auth", async (info) => {
            if (!info.avatar && !info.nickname) return;
            const params = {
              avatar: undefined,
              nickname: info.nickname,
            };
            if (info.avatar)
              params.avatar = await this.uploadAvatar(info.avatar);
            authAPI(params).then(() => {
              this.$store.dispatch("GetUserInfo");
            });
          });
        },
      });
    },
    /** @name 上传头像 **/
    uploadAvatar(path) {
      return new Promise((resolve) => {
        fileUploadAPI({ tempFilePaths: path }).then((res) => {
          resolve(res.path);
        });
      });
    },
    /** @name 成为会员 **/
    createPackage() {
      uni.navigateTo({
        url: "/subpages/my/package/package",
      });
    },
    /** @name 绑定车辆 **/
    bindCar() {
      uni.navigateTo({
        url: "/subpages/my/bind/list/list",
      });
    },
    /** @name 获取会员统计 **/
    getVipStatistics() {
      getVipStatisticsAPI().then((res) => {
        this.stat = res;
      });
    },
    /** @name 预约 **/
    reservation() {
      uni.navigateTo({
        url: "/subpages/my/reservation/list",
      });
    },
    seeAllOrder() {
      uni.navigateTo({
        url: "/subpages/order/myOrder/myOrder",
      });
    },
    helpCenter() {
      uni.navigateTo({
        url: "/subpages/my/helpCenter/helpCenter",
      });
    },
    feedback() {
      uni.navigateTo({
        url: "/subpages/my/feedback/feedback",
      });
    },
    address() {
      uni.navigateTo({
        url: "/subpages/my/address/list",
      });
    },
  },
};
</script>

<style lang="scss">
.header {
  width: 100%;
  background-size: 100% 400rpx;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}
.bg {
  width: 100%;
  height: 83%;
  background-color: #377aff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.header__box {
  box-sizing: border-box;
  padding: 0 20rpx 12rpx 20rpx;
}
.info {
  font-size: 40rpx;
  color: #fff;
  font-weight: 500;
  word-break: break-all;
  position: relative;
}
.info__avatar {
  min-width: 128rpx;
  width: 128rpx;
  height: 128rpx;
  margin-right: 20rpx;
  border-radius: 50%;
  margin-left: 20rpx;
  border: 2px solid #fff;
}
.tools {
  margin-top: 40rpx;
  width: 100%;
  height: 150rpx;
  border-radius: 12rpx;
  box-sizing: border-box;
  padding: 0 24rpx 0 24rpx;
  display: flex;
  align-items: center;
  border: 4rpx solid #fff;
  background-color: $primary;
  color: #fff;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
  font-size: 24rpx;
}
.tools__icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 24rpx;
}
.tools__text {
  font-size: 30rpx;
  border-bottom: 2rpx solid #fff;
  margin-bottom: 12rpx;
  padding-bottom: 12rpx;
  color: #fff;
  font-weight: bold;
}
.tools__right {
  margin-left: 24rpx;
}
.tools__price {
  color: #ff0000;
  margin-bottom: 12rpx;
}
.tools__btn {
  background-color: #e0ad6f;
  color: #fff;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4rpx;
  padding: 6rpx 8rpx;
}
.stat {
  margin-top: 40rpx;
  width: 100%;
  height: 150rpx;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
}
.stat__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #999;
  line-height: 1;
  .stat__num {
    font-size: 34rpx;
    color: #000;
    font-weight: bold;
    margin-bottom: 24rpx;
  }
}
.block {
  box-sizing: border-box;
  padding-left: 24rpx;
  background-color: #fff;
  border-radius: 14rpx;
  overflow: hidden;
  margin-top: 20rpx;
}
.block__item {
  border-bottom: 2rpx solid #eeeeee;
  font-size: 26rpx;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block__item:last-child {
  border-bottom: none;
}
.item__icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
}
.item__arrow {
  width: 88rpx;
  height: 88rpx;
}
</style>
